import * as React from 'react';
import { useEffect } from 'react';
import dayjs from 'dayjs';
import { Checkbox, Form, Button, Icon, Select } from 'antd';
import { DateInput } from '../rangeDateInput';
import TagList from '../tagList';
import moment from 'moment';
import { deltaMinuteIsValid } from '../../page/static-speed/util';

import { useUrlList } from '../../hook/urlList';
import { speedType } from '../../hook/common';
import useTimeController from '../../hook/timeController';

import './index.less';

const {
    useState,
    useRef
} = React;

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
    },
};

export interface Props {
    start?: dayjs.Dayjs
    end?: dayjs.Dayjs
    onSummit: Function,
    type: speedType,
    projectId: number
}

const LOGTYPE_OPTIONS = [
    'info',
    'error'
];

export default function QueryForm({ start = dayjs().add(-10, 'hour'), end = dayjs(), onSummit, type, projectId }: Props) {
    const [pageIndex, setPageIndex] = useState(0);
    const [timeGranularity, setTimeGranularity] = useState('1分钟');
    const [selectDate, setSelectDate] = useState(moment().add(-1, 'days').format("YYYY-MM-DD"));
    const [urlList, url, setUrl] = useUrlList(projectId, type, selectDate);
    const startDateController = useTimeController(start);
    const endDateController = useTimeController(end);



    function changeDate(date, dateString) {
        setSelectDate(dateString);
    }

    function handlerSumbit() {
        if (!projectId || !url) {
            return;
        }
        const startDate = startDateController.getTime();
        const endDate = endDateController.getTime();
        const deltaMinute = (endDate - startDate) / 1000 / 60;
        if (!deltaMinuteIsValid(deltaMinute)) {
            return;
        } 
        onSummit({
            id: projectId,
            date: {
                startDate,
                endDate
            },
            index: pageIndex,
            type: type,
            url: url,
            timeGranularity: timeGranularity
        });
    }

    function isEarlyThanToday(date: any) {
        return date > dayjs();
    }

    function setSelectUrl(id) {
        setUrl(id);
    }

    function setSelectTimeGranularity(option) {
        setTimeGranularity(option);
    }

    useEffect(() => {
        handlerSumbit()
    }, [url, startDateController.getTime(), endDateController.getTime(), timeGranularity]);

    return (
        <div className="cgi-speed-select" >
            <span>搜索URL： </span>
            <Select
                showSearch
                value={url}
                onSelect={setSelectUrl}
                filterOption={(input, option: any) =>
                    option.props.value.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                    option.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                style={{ minWidth: 460, marginRight: 30, marginBottom: 10 }}
            >
                {
                    urlList.map((item) => {
                        return (
                            <Select.Option key={item.toString()} value={item} title={item}>
                                {item}
                            </Select.Option>
                        )
                    })
                }
            </Select>
            <div className="time-select-warpper">
                <span> 时间范围： </span>
                <DateInput controller={startDateController} time={start}></DateInput>
                <span className="gap-syboml"> ~ </span>
                <DateInput controller={endDateController} time={end}></DateInput>
            </div>
            <span>时间粒度： </span>
            <Select
                value={timeGranularity}
                onSelect={setSelectTimeGranularity}
                filterOption={(input, option: any) =>
                    option.props.value.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                    option.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                style={{ marginRight: 30 }}
            >
                {
                    ['1分钟', '5分钟', '1小时'].map((item) => {
                        return (
                            <Select.Option key={item.toString()} value={item} title={item}>
                                {item}
                            </Select.Option>
                        )
                    })
                }
            </Select>
        </div>
    )
}
